<template>
	<view class="applications-page">
		<!-- 自定义导航栏 -->
		<view class="custom-navbar" :style="{ paddingTop: `var(--status-bar-height)` }">
			<view class="navbar-content">
				<text class="navbar-title">我的求职</text>
			</view>
		</view>
		
		    <!-- 求职记录（有数据时替换原空状态） -->
		<view v-if="signupJob && userStore.isVerified" class="job-application-record">

      		<!-- 使用JobCard组件显示岗位信息 -->
      <JobCard 
        :job="signupJob" 
        :showBottomActions="false"
        @cardClick="viewJob"
        @applyClick="preApply"
		bgColor
      />

      <!-- 申请进度步骤 -->
      <view class="progress-section">
        <view class="progress-steps">
          <view class="step-item" :class="{ active: signupJob?.billStatus==1 }">
            <view class="step-number">1</view>
            <text class="step-text">岗位报名</text>
          </view>
          <view class="step-item"  :class="{ active: signupJob?.billStatus==2 }">
            <view class="step-number">2</view>
            <text class="step-text">到厂面试</text>
          </view>
          <view class="step-item" :class="{ active: signupJob?.billStatus==3 }">
            <view class="step-number">3</view>
            <text class="step-text">录取签约</text>
          </view>
          <view class="step-item" :class="{ active: signupJob?.billStatus==4 }">
            <view class="step-number">4</view>
            <text class="step-text">到岗报到</text>
          </view>
          <view class="step-item" :class="{ active: signupJob?.billStatus==5 }">
            <view class="step-number">5</view>
            <text class="step-text">入职在岗</text>
          </view>
        </view>
      </view>

      <!-- 当前待办 -->
      <view class="todo-section" v-if="false">
        <view class="todo-header">
          <text class="todo-title">当前待办 (1)</text>
        </view>
        <view class="todo-list">
          <view class="todo-item">
            <view class="todo-icon">
              <view class="radio-circle"></view>
            </view>
            <view class="todo-content">
              <view class="todo-main">
                <text class="todo-text">岗位信息须知</text>
                <view class="urgent-tag">紧急</view>
              </view>
              <text class="todo-desc">请确认您报名的企业岗位基本信息</text>
            </view>
            <u-icon name="arrow-right" size="16" color="#999999"></u-icon>
          </view>
        </view>
      </view>

      <!-- 到厂说明 -->
      <view class="factory-info-section">
        <view class="factory-info-item">
          <text class="info-label">到厂面试方式:</text>
          <text class="info-value">自行到厂</text>
        </view>
        <view class="factory-info-item">
          <text class="info-label">驻厂客服接待:</text>
          <text class="info-value">13:00至14:00</text>
        </view>
      </view>

      <!-- 面试须知 -->
      <view class="interview-notice-section">
        <view class="notice-title">面试须知</view>
        
        <!-- 准备资料 -->
        <view class="notice-item">
          <view class="notice-header">
            <view class="vertical-bar"></view>
            <text class="section-title">准备资料</text>
          </view>
          <view class="notice-content">
            <text class="content-text">身份证原件</text>
            <text class="content-text">身份证复印件3张</text>
            <text class="content-text">笔黑色</text>
            <text class="content-text">中国银行、中国农业银行、中国建设银行、中国邮政储蓄银行、交通银行、招商银行、兴业银行、中兴银行、民生银行、华夏银行、光大银行、平安银行、中信银行、上海浦东发展银行、广东发展银行银行卡</text>
            <view class="special-notes">
              <text class="notes-text">特别事项：</text>
              <text class="notes-content">(禁止使用二类卡(日限额5000)、信用卡、农村信用社、农村商业银行、带有地方性名称的银行卡(例:贵州银行))</text>
            </view>
          </view>
        </view>

        <!-- 面试说明 -->
        <view class="notice-item">
          <view class="notice-header">
            <view class="vertical-bar"></view>
            <text class="section-title">面试说明</text>
          </view>
          <view class="notice-content">
            <text class="content-text">暂无</text>
          </view>
        </view>

        <!-- 到厂指引 -->
        <view class="notice-item">
          <view class="notice-header">
            <view class="vertical-bar"></view>
            <text class="section-title">到厂指引</text>
          </view>
          <view class="notice-content">
            <text class="content-text">暂无</text>
          </view>
        </view>
      </view>

      <!-- 地图区域 -->
      <view class="map-section">
        <view class="map-container">
          <map 
            v-if="mapLocation.latitude && mapLocation.longitude"
            :latitude="mapLocation.latitude" 
            :longitude="mapLocation.longitude"
            :markers="mapMarkers"
            :scale="15"
            class="company-map"
            show-location
            @tap="openCompanyNavigation"
          >
            <view class="map-provider">
              <text class="provider-text">腾讯地图</text>
              <text class="copyright"></text>
            </view>
          </map>
          <view v-else class="map-placeholder">
            <text class="placeholder-text">暂无企业地址信息</text>
          </view>
        </view>
      </view>
    </view>

    		<!-- 空状态区域（无求职记录时显示） -->
    <view v-else class="empty-state">
      <view class="empty-illustration">
        			<!-- 这里可以放置空状态插图 -->
        <img src="@/static/icon/empty.png" />
      </view>
      <text class="empty-text">暂无有效求职记录</text>
      <view class="empty-actions">
        <view class="action-btn history-btn" @click="viewHistory">
          <text class="btn-text">查看历史报名记录</text>
        </view>
        <view class="action-btn recommend-btn" @click="smartRecommend">
          <text class="btn-text">智能推荐岗位</text>
        </view>
      </view>
    </view>

    		<!-- 推荐岗位区域：有求职记录时隐藏 -->
    <view v-if="!signupJob" class="recommend-section">
            <text class="section-title">可能合适您的岗位:</text>
            <view class="job-list">
                <JobCard 
                    v-for="(job, index) in recommendJobs" 
                    :key="index"
                    :job="job"
                    :avatarList="job.avatarList"
                    buttonText="预报名"
                    @cardClick="viewJob"
                    @applyClick="preApply"
                />
            </view>
		</view>
	</view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import {onShow} from '@dcloudio/uni-app'
import JobCard from '@/components/JobCard.vue'
import { userStore } from '@/stores/userStore'
import { jobApi, applicationApi } from '@/api/api-helper.js'

// 推薦崗位數據（接口填充）
const recommendJobs = ref<any[]>([])
// 我的求職記錄（僅替換空狀態區域）
const signupJob = ref<any | null>(null)

// 地图位置信息
const mapLocation = ref({
  latitude: 30.51667,
  longitude: 114.31667
})

// 地图标记点
const mapMarkers = ref([])

async function fetchRecommendJobs() {
    try {
        const openId = userStore.getOpenId()
        const result = await jobApi.getListToApp({
            currentPage: 1,
            pageSize: 10,
            type: 'progress',
            order: 'signUpPersons',
            openId
        })
        if (result && result.code === 200) {
            const list = (result.data && result.data.list) || []
            recommendJobs.value = list.map((job: any) => ({
                id: job.hireRecruitUseId,
                date: formatDate(job.hireStartDate),
                title: job.hireName || '招聘岗位',
                salary: job.workPrice ? `${job.workPrice}` : '面议',
                location: formatLocation(job.customerName, job.address),
                customerName: job.customerName,
                useWorkType: job.useWorkType,
                address: job.address,
                hireRecruitUseEntryId: job.hireRecruitUseEntryId,
                hireRecruitUseId: job.hireRecruitUseId,
                tags: parseTags(job.enterpriseLabel),
                avatarList: job.pictureList || [],
                engagement: formatEngagement(job.followerCount),
                signup: false,
                rawData: job
            }))
        }
    } catch (e) {
        console.error('獲取推薦崗位失敗', e)
    }
}

// 查看歷史記錄
const viewHistory = () => {
	uni.showToast({
		title: '暂无历史报名记录',
		icon: 'none'
	})
}

// 智能推薦
const smartRecommend = () => {
	uni.switchTab({ url: '/pages/jobs/jobs' })
}

// 查看崗位詳情
const viewJob = (job: any) => {
	// 传递完整的岗位信息到详情页面
	const params = {
		jobId: job.id || 'job_' + Date.now(),
		jobTitle: job.title,
		jobSalary: job.salary,
		jobLocation: job.location,
		jobData: encodeURIComponent(JSON.stringify(job))
	}
	
	uni.navigateTo({
		url: `/pages/job-details/job-details?${Object.entries(params).map(([key, value]) => `${key}=${encodeURIComponent(value)}`).join('&')}`
	})
}

// 預報名：沿用首頁參數規則，進入报名信息确认页
const preApply = (job: any) => {
	// 检查是否已实名认证
		if (!userStore.isVerified.value) {
			uni.showModal({
				title: '提示',
				content: '您还未实名认证，请先完成实名认证后再补充入职资料',
				confirmText: '去认证',
				cancelText: '取消',
				success: (res) => {
					if (res.confirm) {
						// 跳转到实名认证页面
						uni.navigateTo({
							url: '/pages/verification/verification'
						})
					}
				}
			})
			return
		}
    const params = {
        jobId: job.hireRecruitUseId || job.id,
        hireRecruitUseId: job.hireRecruitUseId || job.id,
        hireRecruitUseEntryId: job.hireRecruitUseEntryId || '',
        jobTitle: job.title,
        jobSalary: job.salary,
        jobLocation: job.location,
        customerName: job.customerName,
        useWorkType: job.useWorkType,
        address: job.address,
        jobData: encodeURIComponent(JSON.stringify(job.rawData || job))
    }
    uni.navigateTo({
        url: `/pages/job-application/job-application?${Object.entries(params).map(([k, v]) => `${k}=${encodeURIComponent(v as any)}`).join('&')}`
    })
}

// 輔助：與首頁一致的格式化方法
const formatDate = (dateStr: string) => {
    if (!dateStr) return '今日'
    try {
        const date = new Date(dateStr)
        const month = (date.getMonth() + 1).toString().padStart(2, '0')
        const day = date.getDate().toString().padStart(2, '0')
        return `${month}月${day}日`
    } catch {
        return '今日'
    }
}

const formatLocation = (customerName: string, address: any) => {
    if (!customerName && !address) return '未知地点'
    let location = customerName || ''
    if (address) {
        if (typeof address === 'string') {
            location = location ? `${location} ${address}` : address
        } else if (address.province || address.city) {
            if (address.province && address.city) {
                location += `${location ? ' ' : ''}${address.province}-${address.city}`
            } else if (address.province) {
                location += `${location ? ' ' : ''}${address.province}`
            } else if (address.city) {
                location += `${location ? ' ' : ''}${address.city}`
            }
        }
    }
    return location
}

const parseTags = (enterpriseLabel: string) => {
    if (!enterpriseLabel) return [] as any[]
    try {
        let tags: any[] = []
        if (enterpriseLabel.startsWith('[')) {
            tags = JSON.parse(enterpriseLabel)
        } else {
            tags = enterpriseLabel.split(',').map(tag => tag.trim())
        }
        return tags.map(tag => ({ name: tag }))
    } catch {
        return [] as any[]
    }
}

const formatEngagement = (followerCount: number) => {
    if (!followerCount) return '暂无关注'
    if (followerCount >= 100) {
        return `已关注 ${Math.floor(followerCount / 100) * 100}+`
    }
    return `已关注 ${followerCount}+`
}

onShow(() => {
    console.log('我的求职页面加载完成')
    fetchSignupRecord()
    fetchRecommendJobs()
})

async function fetchSignupRecord() {
    try {
        const openId = userStore.getOpenId()
        if (!openId) return
        const res: any = await applicationApi.getLaborSignupByIdCard({ openId, currentPage: 1, pageSize: 1 })
        if (res && res.code === 200 && res.data && Array.isArray(res.data) && res.data.length > 0) {
            const record = res.data[0]
            signupJob.value = {
                id: record.hireRecruitUseId,
                hireRecruitUseId: record.hireRecruitUseId,
                hireRecruitUseEntryId: record.hireRecruitUseEntryId,
                title: record.hireName || record.positionTitile || '招聘岗位',
                salary: record.workPrice || record.price ? String(record.workPrice || record.price) : '面议',
                date: formatDate(record.hireStartDate || record.createdAt || ''),
                location: formatLocation(record.customerName, record.address),
                customerName: record.customerName,
                useWorkType: record.useWorkType,
                address: record.address,
                tags: parseTags(record.enterpriseLabel || ''),
                avatarList: record.pictureList || [],
                engagement: formatEngagement(record.followerCount || 0),
				billStatus: record.billStatus,
                rawData: record
            }
            
            // 更新地图位置信息（如果有经纬度信息）
            if (record.longitude && record.latitude) {
                mapLocation.value = {
                    latitude: record.latitude,
                    longitude: record.longitude
                }
                
                // 设置地图标记点
                setMapMarkers()
            }
        }
    } catch (e) {
        console.warn('根據 openId 查詢報名記錄失敗:', e)
    }
}

// 设置地图标记点
const setMapMarkers = () => {
    if (mapLocation.value.latitude && mapLocation.value.longitude) {
        // 企业位置标记点
        const companyMarker = {
            id: 1,
            longitude: mapLocation.value.longitude,
            latitude: mapLocation.value.latitude,
            title: signupJob.value?.customerName || '企业位置',
            iconPath: '/static/icon/location-company.png', // 企业位置图标
            width: 32,
            height: 32
        }
        
        mapMarkers.value = [companyMarker]
        console.log('设置地图标记点成功:', companyMarker)
    }
}

// 打开企业导航
const openCompanyNavigation = () => {
    // 检查是否有企业位置信息
    if (!signupJob.value?.address) {
        uni.showToast({
            title: '暂无企业地址信息',
            icon: 'none'
        })
        return
    }
    
    // 构建企业地址
    const companyAddress = signupJob.value.address || ''
    const companyName = signupJob.value.customerName || '企业位置'
    
    // 使用微信小程序的导航接口
    uni.openLocation({
        latitude: mapLocation.value.latitude,
        longitude: mapLocation.value.longitude,
        name: companyName,
        address: companyAddress,
        scale: 15,
        success: () => {
            console.log('导航页面打开成功')
        },
        fail: (err) => {
            console.error('打开导航失败:', err)
            // 如果openLocation失败，尝试使用chooseLocation
            uni.showModal({
                title: '导航提示',
                content: '是否使用地图选择位置进行导航？',
                success: (res) => {
                    if (res.confirm) {
                        chooseLocationForNavigation()
                    }
                }
            })
        }
    })
}

// 选择位置进行导航（备用方案）
const chooseLocationForNavigation = () => {
    uni.chooseLocation({
        success: (res) => {
            console.log('选择位置成功:', res)
            // 用户选择了位置，可以再次尝试打开导航
            uni.openLocation({
                latitude: res.latitude,
                longitude: res.longitude,
                name: res.name || '选择的位置',
                address: res.address || '',
                scale: 15
            })
        },
        fail: (err) => {
            console.error('选择位置失败:', err)
            uni.showToast({
                title: '选择位置失败',
                icon: 'none'
            })
        }
    })
}
</script>

<style lang="scss" scoped>
/* 自定义导航栏 */
.custom-navbar {
	position: absolute;
	top: 40rpx;
	left: 0;
	width: 100%;
	z-index: 10;
	padding-top: var(--status-bar-height);
}

.navbar-content {
	display: flex;
	align-items: center;
	padding: 0 30rpx;
	height: 88rpx;
}

.navbar-title {
	font-size: 36rpx;
	font-weight: bold;
	color: #333333;
}

.applications-page {
	min-height: 100vh;
	position: relative;
	padding: 30rpx; /* 增加整體邊距 */
	padding-top: calc(30rpx + var(--status-bar-height) + 88rpx); /* 为固定导航栏留出空间 */
	background: radial-gradient(118.27% 92.72% at 3.3333333333333335% 7.282913165266107%, var(--u-primary-disabled) 0%, var(--u-primary-light) 61.8%, #fff 90.28%, #fff 100%);
}

/* 顶部导航栏样式调整 */
:deep(.u-navbar) {
	background: linear-gradient(135deg, #FFE4D6 0%, #FFF3ED 100%) !important;
	border-bottom: none !important;
}

:deep(.u-navbar__content) {
	background: transparent !important;
}

:deep(.u-navbar__title) {
	color: #333333 !important;
	font-weight: 600 !important;
}



/* 空狀態區域 */
.empty-state {
	background-color: #FFFFFF;
	border-radius: 16rpx;
	padding: 60rpx 30rpx;
	margin-bottom: 30rpx;
	text-align: center;
	
	.empty-illustration {
		width: 400rpx;
		height: 300rpx;
		margin: 0 auto;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: -100rpx;
		// 這裡可以放置空狀態插圖
	}
	
	.empty-text {
		display: block;
		font-size: 28rpx;
		color: #333333;
		margin-bottom: 40rpx;
	}
	
	.empty-actions {
		display: flex;
		gap: 20rpx;
		justify-content: center;
		
		.action-btn {
			flex: 1;
			max-width: 300rpx;
			padding: 20rpx 30rpx;
			border-radius: 12rpx;
			text-align: center;
			
			&.history-btn {
				background-color: #FFFFFF;
				border: 2rpx solid #E0E0E0;
				
				.btn-text {
					font-size: 26rpx;
					color: #333333;
				}
			}
			
			&.recommend-btn {
				background-color: var(--u-primary);
				
				.btn-text {
					font-size: 26rpx;
					color: #FFFFFF;
				}
			}
		}
	}
}

/* 推薦崗位區域 */
.recommend-section {
	.section-title {
		display: block;
		font-size: 32rpx;
		font-weight: bold;
		color: #333333;
		margin-bottom: 20rpx;
	}
	
	.job-list {
		// 崗位卡片列表樣式由JobCard組件控制
	}
}

/* 求職記錄卡片（鍵值對表達） */
.signup-record {
  margin-bottom: 20rpx;
  .signup-card {
    background-color: #FFFFFF;
    border-radius: 12rpx;
    border: 1rpx solid #F0F0F0;
    padding: 16rpx 20rpx;
    .kv-item {
      display: flex;
      align-items: center;
      border-bottom: 1rpx solid #F5F5F5;
      padding: 18rpx 0;
      &:last-child { border-bottom: none; }
      .kv-label {
        width: 160rpx;
        color: #999999;
        font-size: 26rpx;
      }
      .kv-value {
        flex: 1;
        color: #333333;
        font-size: 28rpx;
      }
    }
  }
}

/* 新的求职记录样式 */
.job-application-record {
  background-color: transparent; /* 移除白色背景 */
  border-radius: 16rpx;
  padding: 0; /* 移除內邊距 */
  margin-bottom: 20rpx;
  margin-top: 20rpx;
}

/* 日期和地点选择 */
.date-location-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24rpx;
  padding: 20rpx 24rpx;
  border-radius: 12rpx;
  backdrop-filter: blur(10rpx);
  
  .date-picker {
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, #FFD4C4 0%, #FFE4D6 100%);
    border-radius: 20rpx;
    padding: 12rpx 20rpx;
    
    .date-text {
      font-size: 28rpx;
      color: #333333;
      margin-right: 8rpx;
      font-weight: 500;
    }
  }
  
  .location-info {
    .location-text {
      font-size: 26rpx;
      color: #666666;
    }
  }
}

/* 企业岗位信息 */
.company-job-info {
  margin-bottom: 24rpx;
  background-color: transparent; /* 移除白色背景 */
  border-radius: 16rpx;
  padding: 0; /* 移除內邊距 */
  box-shadow: none; /* 移除陰影 */
  
  .company-name {
    margin-bottom: 16rpx;
    
    .company-text {
      font-size: 32rpx;
      font-weight: 600;
      color: #333333;
      margin-right: 12rpx;
    }
    
    .reward-text {
      font-size: 24rpx;
      color: #FF6B35;
      background-color: rgba(255, 107, 53, 0.1);
      padding: 6rpx 12rpx;
      border-radius: 8rpx;
      font-weight: 500;
    }
  }
  
  .job-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20rpx;
    
    .resume-link {
      display: flex;
      align-items: center;
      
      .link-text {
        font-size: 26rpx;
        color: #666666;
        margin-right: 4rpx;
      }
    }
    
    .details-text {
      font-size: 24rpx;
      color: #999999;
      display: flex;
      align-items: center;
      
      .arrow-icon {
        margin-left: 4rpx;
      }
    }
  }
  
  .hourly-wage {
    margin-bottom: 20rpx;
    
    .wage-text {
      font-size: 40rpx;
      font-weight: 700;
      color: #FF6B35;
    }
  }
  
  .change-company-btn {
    display: inline-flex;
    align-items: center;
    background-color: #F8F9FA;
    border: 1rpx solid #E0E0E0;
    border-radius: 8rpx;
    padding: 14rpx 20rpx;
    
    .btn-text {
      font-size: 26rpx;
      color: #666666;
      margin-left: 8rpx;
    }
  }
}

/* 申请进度步骤 */
.progress-section {
  margin-bottom: 24rpx;
  background-color: transparent; /* 移除白色背景 */
  border-radius: 16rpx;
  padding: 0; /* 移除內邊距 */
  box-shadow: none; /* 移除陰影 */
  margin-top: 30rpx;
  
  .progress-steps {
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    .step-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      flex: 1;
      
      .step-number {
        width: 44rpx;
        height: 44rpx;
        border-radius: 50%;
        background-color: #E0E0E0;
        color: #999999;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24rpx;
        margin-bottom: 10rpx;
        font-weight: 600;
        transition: all 0.3s ease;
      }
      
      .step-text {
        font-size: 22rpx;
        color: #999999;
        text-align: center;
        transition: all 0.3s ease;
      }
      
      &.active {
        .step-number {
          background-color: var(--u-primary);
          color: #FFFFFF;
          transform: scale(1.1);
        }
        
        .step-text {
          color: var(--u-primary);
          font-weight: 600;
        }
      }
    }
  }
}

/* 当前待办 */
.todo-section {
  margin-bottom: 24rpx;
  background-color: transparent; /* 移除白色背景 */
  border-radius: 16rpx;
  padding: 0; /* 移除內邊距 */
  box-shadow: none; /* 移除陰影 */
  
  .todo-header {
    margin-bottom: 20rpx;
    
    .todo-title {
      font-size: 30rpx;
      font-weight: 600;
      color: #333333;
    }
  }
  
  .todo-list {
    .todo-item {
      display: flex;
      align-items: center;
      padding: 20rpx 0;
      border-bottom: 1rpx solid #F5F5F5;
      
      &:last-child {
        border-bottom: none;
      }
      
      .todo-icon {
        margin-right: 16rpx;
        
        .radio-circle {
          width: 32rpx;
          height: 32rpx;
          border: 2rpx solid #E0E0E0;
          border-radius: 50%;
          background-color: transparent; /* 移除白色背景 */
          transition: all 0.3s ease;
        }
      }
      
      .todo-content {
        flex: 1;
        
        .todo-main {
          display: flex;
          align-items: center;
          margin-bottom: 8rpx;
          
          .todo-text {
            font-size: 28rpx;
            color: #333333;
            font-weight: 500;
            margin-right: 12rpx;
          }
          
          .urgent-tag {
            background-color: var(--u-primary);
            color: #FFFFFF;
            font-size: 20rpx;
            padding: 6rpx 10rpx;
            border-radius: 8rpx;
            font-weight: 500;
          }
        }
        
        .todo-desc {
          font-size: 24rpx;
          color: #999999;
          line-height: 1.5;
        }
      }
    }
  }
}

/* 到厂说明 */
.factory-info-section {
  background-color: transparent; /* 移除白色背景 */
  border-radius: 16rpx;
  padding: 0; /* 移除內邊距 */
  box-shadow: none; /* 移除陰影 */
  margin-bottom: 24rpx;
  
  .factory-info-item {
    display: flex;
    align-items: center;
    padding: 18rpx 0;
    
    &:last-child {
      border-bottom: none;
    }
    
    .info-label {
      width: 200rpx;
      font-size: 26rpx;
      color: #666666;
      font-weight: 500;
    }
    
    .info-value {
      flex: 1;
      font-size: 26rpx;
      color: #333333;
      font-weight: 500;
    }
    
    .modify-link {
      font-size: 24rpx;
      color: var(--u-primary);
      margin-left: 12rpx;
      font-weight: 500;
    }
    
    .activate-status {
      font-size: 24rpx;
      color: var(--u-primary);
      margin-left: 12rpx;
      font-weight: 500;
    }
  }
}

/* 面试须知 */
.interview-notice-section {
  margin-top: 24rpx;

  .notice-title {
    font-size: 28rpx;
    font-weight: 600;
    color: #333333;
    margin-bottom: 16rpx;
    text-align: left;
  }

  .notice-item {
    margin-bottom: 20rpx;
    padding-bottom: 20rpx;
    border-bottom: 1rpx solid #E0E0E0;

    &:last-child {
      border-bottom: none;
      margin-bottom: 0;
      padding-bottom: 0;
    }

    .notice-header {
      display: flex;
      align-items: center;
      margin-bottom: 12rpx;

      .vertical-bar {
        width: 8rpx;
        height: 24rpx;
        background-color: var(--u-primary);
        margin-right: 12rpx;
      }

      .section-title {
        font-size: 28rpx;
        font-weight: 600;
        color: #333333;
      }
    }

    .notice-content {
      .content-text {
        font-size: 26rpx;
        color: #333333;
        margin-bottom: 8rpx;
        line-height: 1.5;
      }

      .special-notes {
        margin-top: 12rpx;
        .notes-text {
          font-size: 24rpx;
          color: #666666;
          margin-right: 8rpx;
        }
        .notes-content {
          font-size: 24rpx;
          color: var(--u-primary);
          line-height: 1.5;
        }
      }
    }
  }
}

/* 保留原有的状态徽章样式 */
.status-badge {
  display: inline-block;
  padding: 6rpx 14rpx;
  border-radius: 10rpx;
  font-size: 24rpx;
  line-height: 1;
}

.status-enrolled {
  color: var(--u-primary);
  background: rgba(255, 107, 53, 0.12);
  border: 1rpx solid rgba(255, 107, 53, 0.28);
}

/* 地图区域样式 */
.map-section {
  background-color: #FFFFFF;
  margin: 20rpx 0;
  border-radius: 16rpx;
  padding: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.map-container {
  position: relative;
  height: 300rpx;
  border-radius: 12rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.company-map {
  width: 100%;
  height: 100%;
  border-radius: 12rpx;
}

.map-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10rpx;
}

.placeholder-text {
  font-size: 24rpx;
  color: #999999;
}

.map-provider {
  position: absolute;
  bottom: 10rpx;
  left: 10rpx;
  display: flex;
  flex-direction: column;
  gap: 4rpx;
}

.provider-text {
  font-size: 20rpx;
  color: #666666;
}

.copyright {
  font-size: 18rpx;
  color: #999999;
}
</style> 